<!DOCTYPE html>
<html lang="en-zh">
<head>
    <meta charset="utf-8">
    <title>short-url</title>
</head>
<body>
<div>
    <div>
        长链接:
        <label for="originUrl"></label><textarea rows="4" cols="50" id="originUrl">
            
        </textarea>
    </div>
    <div>
        短链接:
        <label for="shortUrl"></label><textarea rows="4" cols="50" id="shortUrl">
            
        </textarea>
    </div>

    <div>
        <button type="button" onclick="getShortUrl()">生成短链接</button>
    </div>
</div>

</body>
</html>


<script type="application/javascript">
    function getShortUrl() {
        const originUrl = document.getElementById("originUrl").value.trim();

        const obj = {originUrl: originUrl};

        const xmlHttpReq = new XMLHttpRequest();

        xmlHttpReq.open("POST", "/short/url", true);
        xmlHttpReq.setRequestHeader("Content-type", "application/json");
        xmlHttpReq.setRequestHeader("Access-Control-Allow-Origin", "*");
        xmlHttpReq.setRequestHeader("Access-Control-Allow-Methods", "POST,GET");
        xmlHttpReq.send(JSON.stringify(obj));
        xmlHttpReq.onreadystatechange = function () {
            if (xmlHttpReq.readyState === 4 && xmlHttpReq.status === 200) {
                document.getElementById("shortUrl").innerHTML = xmlHttpReq.responseText;
            }
        }
    }


</script>